<template>
	<view class="moreList" :style="{ '--bg-image': `url(${daziBg1})` }">
		<term-picker :visable.sync="pickerVisable" :defaultDate="defaultDate" @confirm="confirm"></term-picker>
		<view class="calendar flex-around">
			<view class="flex-columns height50  text-align_center" :class="index==timeIndex?'active':''"
				style="color: #999999;" v-for="(item,index) in navTimeList" :key="index"
				@click="switchTime(index,item)">
				<view class="">
					{{item.week}}
				</view>
				<view class="">
					{{item.name}}
				</view>
			</view>
			<view class="flex-column" style="background-color: #F7F5F6;padding: 5rpx;" @click="calendarFn()">
				<image class="calendarImg" :src="image" mode=""></image>
				<text style="color: #999999;">日历</text>
			</view>

		</view>

		<!-- 搜索框 -->
		<view class="search-content">

			<image class="search-img" :src="search" mode=""></image>
			<input placeholder="请搜索搭子标题名称" v-model="searchVal" @input="changeInput" @confirm="changeSearch"
				style="width: auto;line-height: 1em; " placeholder-style="font-size:28rpx;color:#A1A1A1;" />
			<!-- <image v-if="searchVal" class="icon_close" src="/static/delect.png" @click="close"></image> -->
		</view>

		<view class="tabsPosition">
			<v-tabs v-model="cIndex" :tabs="tabs" @classifyListNav=classifyListNav :lineHeight="rpxNumber50+'rpx'"
				:pillsBorderRadius="rpxNumber+'rpx'" bgColor="transparent" line-height="0" activeColor="#fff"
				:pills="pillsBol" @change="e=>changeTab(e,tabsList[e].id)" fontSize="28rpx"></v-tabs>

			<view class="flex-end sortPosition" style="color:#161616" @click="sortFn()">
				排序
				<uni-icons color="#161616" type="down" size="15"></uni-icons>
			</view>

		</view>
		<view class="buildContainer">
			<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback"
				@up="upCallback" :up="upOption" :down="downOption">
				<view class="buildList" v-for="(item,index) in list" :key="index" @click="goDeatilFn(item.id)">
					<view class="flex-end-top ">
						<view class="">
							<image class="orderImg" :src="item.img" mode=""></image>
						</view>
						<view class="margin-left_16rpx flex-columna" style="width:454rpx;height:200rpx;">
							<view class="flex-start-center">
								<view class="topMounted flex" v-if="item.is_top==1">
									<text>顶置</text>
								</view>
								<view class="font-overflow font-weight font30" style="width:100%;margin-left: 8rpx;">
									{{item.title}}


								</view>
							</view>

							<view class="flex-between">
								<view class=" font-overflow flex-start-center" style="max-width:434rpx">
									<image class="tagImg" :src="item.pt_label_icon" mode="widthFix"></image>
									<view class="" v-for="(content,index) in item.labelList" :key="index">
										<view v-if="index<2" class="tagTitleOrange  flex">
											{{content}}
										</view>
									</view>
								</view>
								<image class="addImg" :src="addicon" mode="aspectFit"></image>
							</view>

							<view class="flex-between">
								<view class="flex-start-center ">
									<image class="avaterImg" :src="item.avatar" mode=""></image>
									<text class="font-overflow" style="width: 60rpx;">{{item.nickname}}</text>
								</view>
								<view class="flex-start-center">
									<view class="flex-between v-p-share" v-if="item.join_data.length">
										<view class="v-m-width not-font-overflow flex1">
											<block v-for="(img, index) in item.join_data" :key="index">
												<image v-if="index<4" class="pt_img" :src="img.avatar"></image>
											</block>
											<image class="pt_img" src="headDazi" mode=""></image>
										</view>

									</view>


								</view>
								<view class="" style="color: rgb(234, 72, 13);">
									<text>{{item.people_number}}搭,差{{item.people_number-item.join_data.length}}人</text>
								</view>
							</view>
						</view>

					</view>
					<view style="margin-top: 15rpx;display: flex;justify-content: space-between;width: 100%;">
						<view class="flex">
							<image class="timingImg" src="../../static/path.png" mode=""></image>
							<cc-countdown color="#FFF" background-color="#A561FF" splitorColor="#A561FF"
								:showColon="true" :showDay="true" :day="item.expire_timeObject.days"
								:hour="item.expire_timeObject.hours" :minute="item.expire_timeObject.minutes"
								:second="item.expire_timeObject.seconds" @timeup="timeup"></cc-countdown>
						</view>

						<view class=" flex" style="color: #999999;" v-if="item.distance_kilometer">
							<image class="addressImg" :src="dwBlue" mode=""></image>
							<text class="font-overflow" style="max-width: 150rpx;">{{item.address}}</text>
							<text class="padding_0_10rpx">|</text>
							<text>{{item.distance_kilometer}}km</text>
						</view>
					</view>
				</view>
			</mescroll-body>
		</view>
		<sunui-popup ref="modifyEmployeeInfo">
			<template v-slot:content>

				<view class="moreActiveButton">
					<view class="add" @click.stop="authorityFn(1)">
						距离
					</view>
					<view class="add" @click.stop="authorityFn(2)">
						时间
					</view>
					<view class="add" @click.stop="authorityFn(3)">
						默认
					</view>


				</view>

			</template>
		</sunui-popup>


	</view>
</template>

<script>
	import common from '@/common/js/common.js';
	import tqbTabbar from '../../components/tqb-tabbar/tqb-tabbar.vue'
	export default {
		components: {
			tqbTabbar,
		},
		data() {
			const currentDate = this.getDate({
				format: true
			});
			return {
				daziBg1: this.$img.daziBg1,
				defaultDate: [currentDate, currentDate],
				pickerVisable: false,
				addicon: this.$img.addicon,
				dwBlue: this.$img.dwBlue,
				search: this.$img.search,
				headDazi: this.$img.headDazi,
				value: 1,
				image: this.$img.image,
				searchVal: '',

				pillsBol: true,
				rpxNumber: 40,
				rpxNumber50: 50,



				currentIndex: 0,

				heightSystemss: 0,




				labelList: [],
				list: [],
				tabsList: [],
				son_tab: null,

				navTimeList: [],
				xzTime: common.GetNowTime(new Date()),
				week: '',
				dayList: [],

				cIndex: -1,
				tabs: [''],
				timeIndex: -1,
				detailInfo: [],
				userInfo: uni.getStorageSync("userInfo"),
				downOption: {
					auto: false
				},
				// 上拉配置项
				upOption: {
					auto: true
				},
				windowHeight: 0,
				form: {
					start_time: '',
					end_time: ''
				},
				sort: '',

			}
		},
		onLoad() {




			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight * 2 - 1500;
				}
			});

			this.dayList = common.weekDate().dayList;
			this.tabClassIfyFn()

			this.week = '今';
			// 判断月份是否大于等于10 如果是的则打印，否则补零0
			for (let i = 0; i < this.dayList.length; i++) {
				if (this.dayList[i].day >= 10) {}
				// 补零
				if (this.dayList[i].day < 10) {
					this.dayList[i].day = '0' + this.dayList[i].day;
				}
			}
			let items
			const res = this.dayList.map((item, i) => {
				if (i == 0) {
					items = item.day

				} else {
					items = item.day
				}
				return {
					week: i == 0 ? this.week : item.week,
					name: items,
					value: i,
					item: item.date
				}
			})
			console.log(JSON.stringify(res) + '===================')

			this.navTimeList = res
		},
		onShow() {
			if (uni.getStorageSync("tabClassIfy")) {

				console.log(uni.getStorageSync("tabClassIfy"))
				this.son_tab = uni.getStorageSync("tabClassIfy").id

				console.log(this.tabs)

				const findIndex = this.tabs.findIndex((item) => {
					return item == uni.getStorageSync("tabClassIfy").name
				})
				if (findIndex == -1) {
					this.cIndex = -1
					this.pillsBol = false
					this.rpxNumber = 0
					this.rpxNumber50 = 0
				} else {
					this.cIndex = findIndex
				}
				this.$nextTick(() => {
					this.mescroll?.resetUpScroll();
				})

				setTimeout(() => {
					uni.removeStorageSync('tabClassIfy')
				}, 1000)
			}
			this.$nextTick(() => {
				this.mescroll?.resetUpScroll();
			})

		},
		methods: {
			authorityFn(index) {
				if (!(index == 3)) {
					this.sort = index
					this.$refs.modifyEmployeeInfo.close()

				} else {
					this.sort = ''
					this.$refs.modifyEmployeeInfo.close()
				}
				this.$nextTick(() => {
					this.mescroll?.resetUpScroll();
				})
			},
			sortFn() {
				this.$refs.modifyEmployeeInfo.show({
					anim: 'bottom',
					position: 'bottom',
					shadeClose: true, //false使用户不能点击其它关闭页面
					topclose: false,
					zIndex: 10000

				});
			},
			calendarFn() {
				this.pickerVisable = true
			},
			// 日期获取
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;

				return `${year}-${month}-${day}`;

			},
			confirm(e) {

				console.log('点击确定按钮，返回当前选择的值', e); // ['2021-06-01', '2021-07-01']
				console.log('打印所有的范围日期e', e);
				this.startDate = e[0];
				Object.assign(this.form, {
					start_time: e[0] + ' 00:00:00',
					end_time: e[1] + ' 23:59:59'
				});

				this.$nextTick(() => {
					this.mescroll?.resetUpScroll();
				})


			},
			changeTab(index, id) {
				console.log('当前选中的项：' + index, id)
				this.son_tab = id
				this.pillsBol = true
				this.rpxNumber = 40
				this.rpxNumber50 = 50
				this.$nextTick(() => {
					this.mescroll?.resetUpScroll();
				})

			},
			changeInput(e) {
				console.log(e)
				this.searchVal = e.detail.value
				this.mescroll?.resetUpScroll();
			},
			formatTimeDifference(timestamp) {
				// 获取当前时间的时间戳（以秒为单位）
				const currentTimestamp = Math.floor(Date.now() / 1000);

				// 计算时间差（以秒为单位）
				let timeDifference = timestamp - currentTimestamp;

				// 计算天数
				const days = Math.floor(timeDifference / (24 * 60 * 60));
				timeDifference %= (24 * 60 * 60);

				// 计算小时
				const hours = Math.floor(timeDifference / (60 * 60));
				timeDifference %= (60 * 60);

				// 计算分钟
				const minutes = Math.floor(timeDifference / 60);

				// 剩余的秒数
				const seconds = timeDifference % 60;

				return {
					days: days,
					hours: hours,
					minutes: minutes,
					seconds: seconds
				};
			},
			async upCallback(scroll) {

				if (this.son_tab) {
					const result = await this.$http.post({
						url: this.$api.daziList,
						data: {
							page: scroll.num,
							limit: 10,
							son_tab: this.son_tab,

							title: this.searchVal,
							...this.form,
							oneself_uid: this.userInfo.id,
							dazi_sort_rule: this.sort,
							dimension: this.userInfo.dimension ? this.userInfo.dimension : '',
							longitude: this.userInfo.longitude ? this.userInfo.longitude : ''

						},
						headers: {
							'Authorization': this.userInfo.token
						}

					})


					if (result.code == 0) {

						this.mescroll.endByPage(result.data.list.length, this.$sun.pagingSum(result.data.count, 10));
						if (scroll.num == 1) this.list = [];

						this.list = this.list.concat(result.data.list);

						this.list.forEach((item) => {
							item.expire_timeObject = this.formatTimeDifference(item.expire_time)
							item.labelList = item.label.split(",")
						})



						console.log('this.list', this.list, this.list.length);
					} else {
						this.$sun.toast(result.message, 'none')
					}
				} else {
					const result = await this.$http.post({
						url: this.$api.daziList,
						data: {
							page: scroll.num,
							limit: 10,
							son_tab: this.son_tab,

							title: this.searchVal,
							...this.form,
							oneself_uid: this.userInfo.id,
							dazi_sort_rule: this.sort,
							dimension: this.userInfo.dimension ? this.userInfo.dimension : '',
							longitude: this.userInfo.longitude ? this.userInfo.longitude : ''

						},
						headers: {
							'Authorization': this.userInfo.token
						}

					})


					if (result.code == 0) {

						this.mescroll.endByPage(result.data.list.length, this.$sun.pagingSum(result.data.count, 10));
						if (scroll.num == 1) this.list = [];

						this.list = this.list.concat(result.data.list);

						this.list.forEach((item) => {
							item.expire_timeObject = this.formatTimeDifference(item.expire_time)
							item.labelList = item.label.split(",")
						})



						console.log('this.list', this.list, this.list.length);
					} else {
						this.$sun.toast(result.message, 'none')
					}
				}


			},
			classifyListNav() {
				console.log('点击了')
				this.$sun.navGo('/pagesB/index/classifyAll', {
					type: 1
				})
			},
			goDeatilFn(id) {
				this.$sun.navGo('/pagesB/index/buildSubDetail', {
					id: id
				})
			},

			switchTime(index, switchTime) {
				this.timeIndex = index
				console.log(index, switchTime.item)

				Object.assign(this.form, {
					start_time: switchTime.item + ' 00:00:00',
					end_time: switchTime.item + ' 23:59:59'
				});
				this.mescroll?.resetUpScroll();

			},
			
			async tabClassIfyFn() {
				console.log(this.userInfo.token)
				const resPoster = await this.$http.post({
					url: this.$api.tabList,
					data: {

						type: 1,
						// pid:0,
						top: 1

					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})

				if (resPoster.code == 0) {
					console.log(resPoster)
					resPoster.data.list.unshift({
						id: '',
						name: '全部'
					})
					this.tabsList = resPoster.data.list
					if (resPoster.data.list.length) {
						this.son_tab = resPoster.data.list[0].id
					}
					this.tabs = resPoster.data.list.slice(0, 5).map((item) => {
						return item.name;
					});

					this.$nextTick(() => {
						setTimeout(() => {
							this.cIndex = 0
						}, 500)

						this.mescroll?.resetUpScroll();
					})

				} else {

					this.$sun.toast(resPoster.message, 'none')
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	.moreActiveButton {


		background-color: #fff;

		.flex-center() {
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.moreActiveButton {


			background-color: #fff;


			.add {
				height: 100rpx;
				color: #6568F6;
				font-size: 28rpx;
				font-family: Inter;

				.flex-center();
				border: 2rpx solid #f7f7f7;


			}

			.delete {
				.flex-center();
				height: 100rpx;


				color: #FF4636;
				font-size: 28rpx;
				font-family: Inter;
				box-shadow: 2rpx 2rpx 2rpx 30rpx 30rpx rgba(238, 238, 238, 1.0);
			}


		}

		.add {
			height: 100rpx;
			color: #6568F6;
			font-size: 28rpx;
			font-family: Inter;

			.flex-center();
			border: 1px solid #f7f7f7;


		}

		.delete {
			.flex-center();
			height: 100rpx;


			color: #FF4636;
			font-size: 28rpx;
			font-family: Inter;
			box-shadow: 2rpx 2rpx 2rpx 30rpx 30rpx rgba(238, 238, 238, 1.0);
		}


	}

	.moreList {
		background-repeat: no-repeat;
		background-size: cover;
		background-image: (var(--bg-image));
		height: 100vh;
		padding: 20rpx;

		.calendar {

			height: 138rpx;
			border-radius: 20rpx;

			background: rgb(255, 255, 255);

			.calendarImg {
				width: 70rpx;
				height: 70rpx;
			}

			.active {
				border-radius: 20rpx;
				padding: 10rpx;
				box-sizing: content-box;
				background: linear-gradient(180.00deg, rgb(57, 143, 252), rgb(129, 90, 255) 100%);
				color: #ffffff !important;
			}
		}

		.tabsPosition {
			position: relative;

			.sortPosition {
				top: 14rpx;
				z-index: 99;
				right: 0;
				// background-color: #e3edf5;
				position: absolute;
				padding: 0 20rpx;
			}

		}

		.search-content {

			// justify-content: center;
			display: flex;
			align-items: center;
			margin: 20rpx 0;
			height: 76rpx;

			background: rgb(246, 248, 255);
			;
			border-radius: 84rpx;
			margin-top: 40rpx;

			.search-img {
				width: 30rpx;
				height: 30rpx;
				margin-right: 20rpx;
				margin-left: 20rpx;
			}

			.address-img {
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;
				margin-left: 20rpx;
			}

			.icon_close {
				padding: 0rpx 15rpx;
				width: 36rpx;
				height: 36rpx;
				margin-right: 30rpx;
			}

		}

		.buildContainer {
			margin-top: 20rpx;

			.timingImg {
				width: 38.92rpx;
				height: 38.92rpx;
				margin-right: 15rpx;
			}

			.line {
				width: 10rpx;
				height: 30rpx;
				border-radius: 106rpx;
				margin-right: 10rpx;
				background: rgb(120, 93, 246);
			}

			.buildList {

				display: flex;
				flex-direction: column;
				align-items: flex-start;
				padding: 20rpx;
				background: rgb(255, 255, 255);
				margin-top: 20rpx;
				border-radius: 20rpx;

				.tagImg {
					width: 118rpx !important;
					height: 48rpx;
					margin-right: 10rpx;
				}

				.addImg {
					width: 30.02rpx;
					height: 30.02rpx;
				}

				.tagTitle {
					padding: 10rpx 20rpx;
					height: 36rpx;
					border-radius: 12rpx 12rpx 24rpx 12rpx;
					font-size: 20rpx;
					color: rgb(0, 198, 141);
					background: rgb(212, 255, 249);
					margin-right: 5rpx;
				}

				.avaterImg {
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
					margin-right: 8rpx;
				}

				.tagTitleGay {
					padding: 10rpx 20rpx;
					height: 36rpx;
					border-radius: 12rpx 12rpx 24rpx 12rpx;
					font-size: 20rpx;
					color: #666666;
					background: #F5F5F5;
					margin-right: 5rpx;
				}

				.tagTitleOrange {
					padding: 10rpx 20rpx;
					height: 36rpx;
					border-radius: 12rpx 12rpx 24rpx 12rpx;
					font-size: 20rpx;
					color: rgb(238, 100, 41);
					background: rgba(238, 100, 41, 0.13);
					;
					margin-right: 5rpx;
				}

				.tagTitlePink {
					width: 116rpx;
					height: 36rpx;
					border-radius: 12rpx 12rpx 24rpx 12rpx;
					font-size: 20rpx;
					color: #F95CEF;
					background: #FFF2F8;
					margin-right: 5rpx;
				}

				.location {
					padding: 5rpx 10rpx;
					// width: 110rpx;
					height: 48rpx;
					border-radius: 20rpx;
					margin-left: 15rpx;
					background: rgb(235, 245, 255);
				}

				.pt_img {
					width: 50rpx;
					height: 50rpx;
					margin-right: -30rpx;
					border-radius: 50%;
				}

				.v-p-share {
					padding: 2rpx 2rpx 0 2rpx;

					.v-m-width {
						margin-right: 40rpx;

						.pt_img {
							width: 50rpx;
							height: 50rpx;
							margin-right: -25rpx;
							border-radius: 50%;
						}
					}

					.v-share-friend {
						text {
							color: #294d7d;
							font-size: 24rpx;
							padding-right: 50rpx;
						}

						view {
							color: #ffffff;
							width: 154rpx;
							height: 58rpx;
						}
					}

					.v-share-friend2 {
						text {
							color: #294d7d;
							font-size: 24rpx;
						}
					}
				}

				.orderImg {
					width: 192rpx;
					height: 192rpx;
					border-radius: 30rpx;


				}

				.topMounted {

					width: 75rpx;
					height: 36rpx;
					border-radius: 12rpx;
					color: #fff;
					background: rgb(1, 145, 255);
					margin-right: 5rpx;
				}

				.addressImg {
					width: 28.5rpx;
					height: 28.12rpx;
				}
			}
		}
	}
</style>